<template>
    <div>
        <h1>情况一：监视ref定义的对象类型数据</h1>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄：{{person.age}}</h2>
        <button @click="updateName">修改姓名</button>
        <button @click="updateAge">修改年龄</button>
        <button @click="updatePerson">修改人</button>
    </div>
</template>

<script setup lang="ts" name="Person">
import {watch, ref} from "vue";
let person = ref({
    name: 'zs',
    age: 13
})
function updateName() {
    person.value.name = 'lisi'
}
function updateAge() {
    person.value.age = 44
}
function updatePerson() {
    person.value = {name:'哈哈',age: 111}
}

watch(person,(newValue,oldValue)=> {
    console.log('person变化了',newValue,oldValue)
},{deep: true,immediate: true})

</script>

<style scoped>
button {
    margin-right: 10px;
}
</style>
